import {Button, Col, Form, Input, message, Popover, Progress, Row, Select} from 'antd';
import type {FC} from 'react';
import React, {useEffect, useState} from 'react';
import type {Dispatch} from 'umi';
import {connect, FormattedMessage, useIntl} from 'umi';

import type {StateType} from './model';
import styles from './style.less';
import {getFakeCaptcha} from "@/services/login";
import {fakeRegister} from "@/pages/Register/service";

const FormItem = Form.Item;
const {Option} = Select;
const InputGroup = Input.Group;

const passwordStatusMap = {
  ok: (
    <div className={styles.success}>
      <FormattedMessage id="register.strength.strong"/>
    </div>
  ),
  pass: (
    <div className={styles.warning}>
      <FormattedMessage id="register.strength.medium"/>
    </div>
  ),
  poor: (
    <div className={styles.error}>
      <FormattedMessage id="register.strength.short"/>
    </div>
  ),
};

const passwordProgressMap: {
  ok: 'success';
  pass: 'normal';
  poor: 'exception';
} = {
  ok: 'success',
  pass: 'normal',
  poor: 'exception',
};

interface RegisterProps {
  dispatch: Dispatch;
  register: StateType;
  submitting: boolean;
  close: () => void;
}

export interface UserRegisterParams {
  mail: string;
  password: string;
  confirm: string;
  mobile: string;
  captcha: string;
  prefix: string;
}

const Register: FC<RegisterProps> = ({
                                       submitting,
                                       dispatch,
                                       close,
                                     }) => {
  const [count, setcount]: [number, any] = useState(0);
  const [visible, setvisible]: [boolean, any] = useState(false);
  const [prefix, setprefix]: [string, any] = useState('86');
  const [popover, setpopover]: [boolean, any] = useState(false);
  const confirmDirty = false;
  let interval: number | undefined;
  const [form] = Form.useForm();
  const {formatMessage} = useIntl()

  useEffect(
    () => () => {
      clearInterval(interval);
    },
    [],
  );

  const onGetCaptcha = () => {
    form.validateFields(["phone"]).then((r) => {
      getFakeCaptcha(r.phone).then(() => {
        let counts = 59;
        setcount(counts);
        interval = window.setInterval(() => {
          counts -= 1;
          setcount(counts);
          if (counts === 0) {
            clearInterval(interval);
          }
        }, 1000);
      })
    })

  };
  const getPasswordStatus = () => {
    const value = form.getFieldValue('password');
    if (value && value.length > 9) {
      return 'ok';
    }
    if (value && value.length > 5) {
      return 'pass';
    }
    return 'poor';
  };
  const onFinish = (values: Record<string, any>) => {
    fakeRegister({...values}).then(() => {
      message.success('注册成功！')
      form.resetFields()
      clearInterval(interval);
      close()
    });
    dispatch({
      type: 'register/submit',
      payload: {
        ...values,
        prefix,
      },
    });
  };
  const checkConfirm = (_: any, value: string) => {
    const promise = Promise;
    if (value && value !== form.getFieldValue('password')) {
      return promise.reject(formatMessage({id: 'register.password.twice'}));
    }
    return promise.resolve();
  };
  const checkPassword = (_: any, value: string) => {
    const promise = Promise;
    // 没有值的情况
    if (!value) {
      setvisible(!!value);
      return promise.reject(formatMessage({id: 'register.password.required'}));
    }
    // 有值的情况
    if (!visible) {
      setvisible(!!value);
    }
    setpopover(!popover);
    if (value.length < 6) {
      return promise.reject('');
    }
    if (value && confirmDirty) {
      form.validateFields(['confirm']);
    }
    return promise.resolve();
  };
  const changePrefix = (value: string) => {
    setprefix(value);
  };
  const renderPasswordProgress = () => {
    const value = form.getFieldValue('password');
    const passwordStatus = getPasswordStatus();
    return value && value.length ? (
      <div className={styles[`progress-${passwordStatus}`]}>
        <Progress
          status={passwordProgressMap[passwordStatus]}
          className={styles.progress}
          strokeWidth={6}
          percent={value.length * 10 > 100 ? 100 : value.length * 10}
          showInfo={false}
        />
      </div>
    ) : null;
  };

  return (
    <div className={styles.main}>
      <h3>
        <FormattedMessage id="register.register.register"/>
      </h3>
      <Form form={form} name="UserRegister" onFinish={onFinish}>
        <FormItem
          name="email"
          rules={[
            {
              required: true,
              message: formatMessage({id: 'register.email.required'}),
            },
            {
              type: 'email',
              message: formatMessage({id: 'register.email.wrong-format'}),
            },
          ]}
        >
          <Input size="large" placeholder={formatMessage({id: 'register.email.placeholder'})}/>
        </FormItem>
        <FormItem
          name="name"
          rules={[
            {
              required: true,
              message: formatMessage({id: 'register.name.required'}),
            }
          ]}
        >
          <Input size="large" placeholder={formatMessage({id: 'register.name.placeholder'})}/>
        </FormItem>
        <Popover
          getPopupContainer={(node) => {
            if (node && node.parentNode) {
              return node.parentNode as HTMLElement;
            }
            return node;
          }}
          content={
            visible && (
              <div style={{padding: '4px 0'}}>
                {passwordStatusMap[getPasswordStatus()]}
                {renderPasswordProgress()}
                <div style={{marginTop: 10}}>
                  <FormattedMessage id="register.strength.msg"/>
                </div>
              </div>
            )
          }
          overlayStyle={{width: 240}}
          placement="right"
          visible={visible}
        >
          <FormItem
            name="password"
            className={
              form.getFieldValue('password') &&
              form.getFieldValue('password').length > 0 &&
              styles.password
            }
            rules={[
              {
                validator: checkPassword,
              },
            ]}
          >
            <Input
              size="large"
              type="password"
              placeholder={formatMessage({id: 'register.password.placeholder'})}
            />
          </FormItem>
        </Popover>
        <FormItem
          name="confirm"
          rules={[
            {
              required: true,
              message: formatMessage({id: 'register.confirm-password.required'}),
            },
            {
              validator: checkConfirm,
            },
          ]}
        >
          <Input
            size="large"
            type="password"
            placeholder={formatMessage({id: 'register.confirm-password.placeholder'})}
          />
        </FormItem>
        <InputGroup compact>
          <Select size="large" value={prefix} onChange={changePrefix} style={{width: '20%'}}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
          </Select>
          <FormItem
            style={{width: '80%'}}
            name="phone"
            rules={[
              {
                required: true,
                message: formatMessage({id: 'register.phone-number.required'}),
              },
              {
                pattern: /^\d{11}$/,
                message: formatMessage({id: 'register.phone-number.wrong-format'}),
              },
            ]}
          >
            <Input
              size="large"
              placeholder={formatMessage({id: 'register.phone-number.placeholder'})}
            />
          </FormItem>
        </InputGroup>
        <Row gutter={8}>
          <Col span={16}>
            <FormItem
              name="captcha"
              rules={[
                {
                  required: true,
                  message: formatMessage({id: 'register.verification-code.required'}),
                },
              ]}
            >
              <Input
                size="large"
                placeholder={formatMessage({id: 'register.verification-code.placeholder'})}
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <Button
              size="large"
              disabled={!!count}
              className={styles.getCaptcha}
              onClick={onGetCaptcha}
            >
              {count
                ? `${count} s`
                : formatMessage({id: 'register.register.get-verification-code'})}
            </Button>
          </Col>
        </Row>
        <FormItem>
          <Button
            size="large"
            loading={submitting}
            className={styles.submit}
            type="primary"
            htmlType="submit"
          >
            <FormattedMessage id="register.register.register"/>
          </Button>
        </FormItem>
      </Form>
    </div>
  );
};
export default connect(
  ({
     register,
     loading,
   }: {
    register: StateType;
    loading: {
      effects: Record<string, boolean>;
    };
  }) => ({
    register,
    submitting: loading.effects['register/submit'],
  }),
)(Register);
